<template>
  <SearchTable ref="SearchTable" :columns="columns" :tableConfig="tableConfig" @onSelectChange="onSelectChange" :queryParams="queryParams">
    <template slot="left-btn">
      <SearchBar :formItems="items" :formModel="queryParams"></SearchBar>
    </template>
    <template slot="right-btn">
      <a-button type="primary">新增</a-button>
    </template>
    <template slot-scope="{ record }">
      <a-space>
        <a-button type="link" class="success-color" @click="handelEdit(record)">编辑</a-button>
        <a-button type="link" @click="handelLook(record)">查看</a-button>
        <a-button type="link" class="error-color" @click="handelDel(record)">删除</a-button>
      </a-space>
    </template>
  </SearchTable>
</template>
<script>
import { searchTable } from '@/mixins'
export default {
  mixins: [searchTable],
  data() {
    return {
      columns: [
        {
          dataIndex: 'sort',
          title: '排序',
          sorter: (a, b) => a.sort - b.sort
        },
        {
          dataIndex: 'title',
          title: '标题'
        },
        {
          dataIndex: 'content',
          title: '内容',
          scopedSlots: { customRender: 'length' }
        },
        {
          dataIndex: 'createdTime',
          title: '创建时间',
          scopedSlots: { customRender: 'dateTime' }
        }
      ],
      tableConfig: {
        // hasIndex: true, // 显示序号
        // title: '功能型表格', // 表格标题
        // titleStyle: {
        //   color: 'red'
        // }, // 标题样式
        // bordered: true, // 显示边框
        // hasSelect: true, // 多行选择
        // selectType: 'radio', // 单选
        size: 'middle', // 表格大小
        // hideOperation: true // 隐藏操作列
        // operationName: '菜单', // 列名
        // operationWidth: 200, // 列宽
        // operationFixed: 'right', // 固定位置
        // hidePagination: true, // 隐藏分页
        // pagination: {
        //   position: true, // 分页居中
        //   size: 'small' // 迷你显示
        // }
        // hideBtnGroup: true, // 隐藏顶部按钮
        btnGroup: {
          hasSearch: true, // 查询按钮
          queryName: '关键字',
          //   hideReset: true, // 隐藏重置按钮
          hasExport: true, // 导出按钮
          hasQuery: true // 查询输入框
        },
        handelFun: {
          search: this.getSearch, // 查询方法
          reset: this.handelReset // 重置方法
        }
      },
      items: [
        {
          type: 'input',
          key: 'title',
          label: '标题'
        },
        {
          type: 'date',
          key: 'date',
          label: '日期',
          props: {
            valueFormat: 'YYYY-MM-DD'
          }
        }
      ]
    }
  },
  mounted() {
    this.$refs.SearchTable.getSearch(true)
  },
  methods: {
    // 查询数据
    async getSearch(searchData) {
      console.log(searchData)
      let data = await this.$api.table.getSearchTable(searchData)
      return data
    },
    // 多行选择
    onSelectChange(data) {
      console.log(data)
    }
  }
}
</script>
